<template>
  <div v-if="visible" class="ai-chat-window">
      <el-dialog
      :visible.sync="visible"
      width="50%"
      :append-to-body="true"
      :lock-scroll="false"
      :close-on-click-modal="false" >
      <div class="ai-chat-window__header">
      <span>小萌</span>
      <el-button type="text" @click="toggleChatWindow">×</el-button>
    </div>
    <div class="ai-chat-window__body">
      <div class="ai-chat-window__messages">
        <div
          v-for="(message, index) in messages"
          :key="index"
          :class="['ai-chat-window__message', message.type]"
          style="height: 40px;"
        >
          <span>{{ message.type }}：</span>
          <span>{{ message.content }}</span>
        </div>
      </div>
      <div class="ai-chat-window__input">
        <el-input
          v-model="userInput"
          placeholder="输入你想问的问题"
          @keyup.enter.native="sendMessage"
        ></el-input>
        <el-button type="primary" @click="sendMessage">发送</el-button>
      </div>
    </div>
      </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
      return {
          visible: false,
          userInput: '',
          messages: [
              { type: '小萌', content: '你好，我有什么可以帮助你的吗？' },
          ],
          user: {
              username: 'zljr'
          }
      }
  },
  methods: {
   
      toggleChatWindow() {
          this.visible = !this.visible;
      },
      async sendMessage() {
          if (this.userInput.trim()) {
              this.messages.push({ type: '用户', content: this.userInput });
              const userMessage = this.userInput;
              // console.log(userMessage)
              this.userInput = '';

              try {
                  const res =await axios.post('http://localhost:11434/api/generate', {
                      model: "Qwen2",
                      prompt:userMessage,
                      stream:false
                  });
                  console.log(res.data);
                  if (res.data) {
                      this.messages.push({
                          type: '小萌',
                          content: res.data.response
                      });
                  } else {
                      this.messages.push({
                          type: '小萌',
                          content: '抱歉，我无法处理您的请求。'
                      });
                  }
              } catch (error) {
                  console.error('Error communicating with AI:', error);
                  this.messages.push({
                      type: '小萌',
                      content: '网络错误，请稍后再试。'
                  });
              }
          }
      }
  },

}
</script>

<style scoped>
.ai-chat-window {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1000;
}
.ai-chat-window__dialog {
overflow: hidden;
}
.ai-chat-window__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f5f7fa;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.ai-chat-window__header span {
font-size: 18px;
font-weight: bold;
}
.ai-chat-window__body {
padding: 10px;
height: 300px;
overflow-y: auto;
}
.ai-chat-window__messages {
padding: 10px;
}
.ai-chat-window__message {
margin: 5px 0;
padding: 10px;
border-radius: 5px;
max-width: 70%;
}
.ai-chat-window__message.用户 {
background-color: #dcf8c6;
align-self: flex-end;
}
.ai-chat-window__message.小萌 {
background-color: #e0f7fa;
align-self: flex-start;
}
.ai-chat-window__input {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f5f7fa;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.ai-chat-window__input .el-input {
flex: 1;
}
.ai-chat-window__input .el-button {
margin-left: 10px;
}

</style>